<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Developer playground</title>

    <style>

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #container {
            width: 100%;
            height: 100%;
            background-color: #000;
        }

    </style>

    <script src="../examples/lib/jquery.min.js"></script>
    <script src="../examples/lib/three.min.js"></script>
    <script src="../examples/lib/tween.min.js"></script>
    <script src="../examples/lib/stats.min.js"></script>
    <script src="../examples/lib/TrackballControls.js"></script>
    <script src="../examples/lib/tf.min.js"></script>
    <script src="../dist/tensorspace.js"></script>

</head>
<body>

<div id="container"></div>

<script>

	let modelContainer = document.getElementById("container");

	let inputLayer = new TSP.layers.GreyscaleInput({ shape: [28, 28, 1] });

	let convLayer1 =  new TSP.layers.Conv2d({ kernelSize: 5, filters: 6, strides: 1, padding: "same" });

	convLayer1.apply(inputLayer);

	let convLayer2 =  new TSP.layers.Conv2d({ kernelSize: 5, filters: 6, strides: 1, padding: "same" });

	convLayer2.apply(inputLayer);

	let addLayer = TSP.layers.Add([convLayer1, convLayer2]);

	let model = new TSP.models.Model(modelContainer, {
		inputs: [inputLayer],
		outputs: [addLayer]
	});

	model.init();

</script>

</body>
</html>